<template>
  <div class="app-container">
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleTabClick(activeName)"
    >
      <el-tab-pane
        ref="default"
        label="包裹"
        name="default"
      >
        <PackageSource />
      </el-tab-pane>
      <el-tab-pane
        ref="six"
        label="包裹组合"
        name="six"
      >
        <PackageGroup />
      </el-tab-pane>
      <!--      <el-tab-pane label="组词" name="default">-->
      <!--        <FindWord></FindWord>-->
      <!--      </el-tab-pane>-->
      <!--      <el-tab-pane label="单词" name="first">-->
      <!--        <Word></Word>-->
      <!--      </el-tab-pane>-->
      <!--      <el-tab-pane label="类型" name="second">-->
      <!--        <WordType></WordType>-->
      <!--      </el-tab-pane>-->
      <!--      <el-tab-pane label="词性" name="third">-->
      <!--        <WordClass></WordClass>-->
      <!--      </el-tab-pane>-->
      <el-tab-pane
        label="用户管理"
        name="four"
      >
        <User />
      </el-tab-pane>
      <el-tab-pane
        label="角色管理"
        name="five"
      >
        <Role />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import WordType from "@/views/word/wordType";
import WordClass from "@/views/word/wordClass";
import Word from "@/views/word/word";
import FindWord from "@/views/word/findWord";
import User from "@/views/user";
import Role from "@/views/role";
import PackageSource from "@/views/word/packageSource";
import PackageGroup from "@/views/word/packageGroup";

export default {
  name: "Index",
  components: {PackageGroup, Role, User, PackageSource},
  data() {
    return {
      activeName: "default"
    }
  },
  methods: {
    handleTabClick(tab) {
      console.log(tab)
      // 根据当前激活的标签页来调用对应组件的方法
      const componentName = `${tab}`;
      if (this.$refs[componentName]) {
        console.log(this.$refs[componentName])
        this.$refs[componentName].list();
      }
    },
  },
}
</script>

<style scoped>

</style>
